<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>立即投资</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" href="#(assets)/css/weui.css"/>
<link rel="stylesheet" href="#(assets)/css/weui2.css"/>
<script type="text/javascript" src="#(path)/assets/js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="#(path)/assets/js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="#(assets)/js/layer/layer.js"></script>

#@checkToken()
</head>
<body ontouchstart class="page-bg" style="background:#f2f6f9">
	<div align="center" style="width:100%;height:60px;background:#FFF">
		 
		<div align="center" style="font-size:14px;color:#626262;margin-top:0px;">
			<div align="center" style="float:left;width:50%;margin-top:10px;border-right:1px solid #f0f0f0">
				<div>体验金余额</div>
				<div><a id="availableAmount" style="color:#fa3048"></a>元</div>
			</div>
			<div align="center" style="float:left;width:45%;margin-top:10px;">
				<div>可投体验金</div> 
				<div><a id="ableamount" style="color:#fa3048"></a>元</div>
			</div>
		</div>
	</div>
	<div align="center" style="width:100%;padding-bottom:10px;margin-top:10px;background:#FFF;font-size:14px;"> 
		<div style="width:90%;height:40px;border-bottom:1px solid #f0f0f0;line-height:40px;">
			<div style="float:left"><a style="color:#626262">预期收益:</a></div>
			<div style="float:right"><a id="yq_amount" style="color:#626262;margin-right:20px;">请选择体验金金额</a></div>
		</div>

		<div id="investProm_jiaxi" style="width:90%;clear:both;height:40px;line-height:40px;">
			<div style="float:left"><a style="color:#626262">体验金</a></div>
			<div style="float:right">
				<span id="yhq_num" style="font-size:13px;color:#fa3048;"></span>
				<img id="investProm_jia" style="vertical-align:middle;height:16px;"src="#(assets)/images/mobile/personal_jiantou2.png">
			</div>
		</div>
		<div hidden id="investProm_jialist" style="width:100%;max-height:150px;overflow:auto;border-top:1px solid #f0f0f0">
			
		</div>
    </div>
	<div align="center" style="clear:both;height:30px;line-height:30px;font-size:12px;width:100%;color:#666">
		温馨提示：体验标投资每次仅限使用一张体验金券
	</div>
	<div align="center" >   
		<div id="subbutton" style="height:50px;width:90%;background:#fa3048;line-height:50px;color:#FFF;border-radius:25px;">
			<img id="investDetail_subimg" style="height:50px;float:left" src="/assets/images/mobile/investDetail_button1.png">
			<span style="padding:10px 20px"id="investProm_sumbit">立即投资</span> 
		</div>
	</div>

	
	
	<div id="investDetail_mengban" hidden  style="background-color:rgba(0,0,0,0.4);position:absolute;top:0;width:100%;height:100%;z-index:550">
		<div align="center" id="investDetail_jisuanqi" style="margin-left:5%;background:#FFF;height:180px;width:90%;position:absolute;top:150px;z-index:600;border-radius:10px;font-size:14px;">
			<div align="center" style="width:100%;line-height:49px;height:49px;border-bottom:1px solid #eee;font-size:16px;">
				<a style="color:#626262"> 计算收益</a>
			</div>
			<div align="center" style="width:100%;line-height:30px;height:80px;border-bottom:1px solid #eee">
				<div style="width:49%;height:80px;float:left;border-right:0px solid #eee;">
					<div>投资金额</div>
					<input id="amounts" placeholder="请输入金额" type="tel" style="border:1px solid #fa3048;width:80px;height:30px;font-size:13px;color:#fa3048;"> 元
				</div>
				<div id="riqi" style="width:49%;float:right">
					<div>投资期限</div>
					<div><span id="datalimit"></span>天</div>
				</div>
			</div>
			<div align="center" style="width:90%;line-height:49px;height:49px;">
				<span style="float:left">预期收益（元）</span>
				<span style="color:#fa3048;" id="shouyi">0.00</span>
			</div>
			<div align="center" style="width:90%;line-height:49px;height:49px;">
				<img style="width:40px;margin-top:10px;" src="#(assets)/images/investDetail_subimg.png" id="cha">
			</div>
		</div>
	</div>
	<!--信息确认弹框-->
	<div id="investProm_mengban"  hidden style="background-color:rgba(0,0,0,0.4);position:absolute;top:0;width:100%;height:100%;z-index:550">
		<div align="center" style="margin-left:5%;background:#FFF;height:265px;width:90%;position:absolute;top:100px;z-index:600;border-radius:10px;font-size:14px;">
			<div align="center" style="width:100%;line-height:49px;height:49px;border-bottom:1px solid #eee;font-size:16px;">
				<a style="color:#626262">投资确认</a>
			</div>
			<div style="width:100%;line-height:40px;height:40px;">
				<div align="left" style="margin-left:10%;float:left;">投资标的：<span id="name"></span></div>
			</div>
			<div style="width:100%;line-height:40px;height:40px;border-top:1px solid #e6e6e6">
				<div align="left" style="margin-left:10%;float:left;">体验金金额：<span id="tz_amount"></span></div>
			</div>
			<div style="width:100%;line-height:40px;height:40px;border-top:1px solid #e6e6e6">
				<div align="left" style="margin-left:10%;float:left;">预期收益：<span id="yq_amount2"></span></div>
			</div>
			<div style="width:100%;line-height:40px;height:40px;border-top:1px solid #e6e6e6">
				<div align="left" style="margin-left:10%;float:left;">体验金：<span id="yhq_num2"></span></div>
			</div>
			<div align="center" style="clear:both;width:100%;line-height:49px;height:49px;border-top:1px solid #e6e6e6">
				<div id="investProm_OK" align="center" style="float:left;width:49%;height:49px;border-right:1px solid #e6e6e6">确认</div>
				<div id="investProm_passforse" align="center" style="float:right;width:49%;height:49px">取消</div>
			</div>
		</div>
	</div>

	<script id="demo" type="text/x-jquery-tmpl">
		<div align="center" pass="${coupon_id}" class="pass" pass2="${amount}" pass3="${types}" pass4="${yhq_type}" style="clear:both;margin-top:10px;background:#FFF;width:100%;">
			<div style="width:96%;height:70px;margin-top:10px;border:1px solid #fa3048;border-radius:10px">
			<div style="border-bottom:1px dashed #000;height:34px;">
				<div style="float:left;margin-left:10px;line-height:34px;font-size:14px;">${amount}元</div>
				<div style="float:left;font-size:12px;margin-left:10px;line-height:34px;">失效时间：${create_time}</div>
				<div style="float:right;margin-right:10px;"><img style="width:20px;" src="${url1}"></div>
			</div>
			
			<div>
				<div align="left" style="color:#fa3048;font-size:12px;margin-left:10px;line-height:17px;">${allow_bid}</div>
				<div align="left" style="font-size:12px;margin-left:10px;line-height:17px;">满${limit_amount}元可用</div>
			</div>
		</div> 
		
	</script>   
<script type="text/javascript" src="/assets/dropload/dropload.min.js"></script>
<link rel="stylesheet" href="/assets/dropload/dropload.css"> 
<script>
	//数据获取
	var id = GetRequest()["id"];
	var couponmoney = 0;
	var rate = 0;
	var datalimit = 0;
	var panduan = 0;
	var shouyi = 0;
	var couponid; 
	var yhq_type2;
	var url ="#(path)/bid/toTrade?token=#(session.token??)&id="+id;
	$.getJSON(url, function(data) {
		var datainfo2 = data.data.item;
		$("#name").html(datainfo2.name);
		rate = datainfo2.rate;
		datalimit = datainfo2.day_limit; 
		$("#datalimit").html(datalimit);
		var coupons = data.data.coupon;
		//可投份数 
		var ableNumber = datainfo2.unit - datainfo2.avunit;
		$("#ableamount").html(ableNumber*datainfo2.unit_amount);
		//判断有无优惠券
		if(data.data.coupon.length ==0 ){
			$("#availableAmount").html(0);
			$("#yhq_num").html("您无可用优惠券");
		}else{
			$("#yhq_num").html("您有可用优惠券，请选择！");
			$.each(coupons, function(i, item){ 
				couponmoney = couponmoney + Number(item.amount);
				var url1 = "#(assets)/images/mobile/reward_3.png";
				var amount = item.amount; 
				var types = "体验金";
				var invests = {coupon_id:item.id,yhq_type:item.type,types:types,url1:url1,amount:amount,create_time:item.create_time,allow_bid:item.allow_bid,limit_amount:item.limit_amount};
				$("#demo").tmpl(invests).appendTo('#investProm_jialist');
			});
			$("#availableAmount").html(couponmoney);   
		}
		
		//展示优惠券
		$("#investProm_jiaxi").click(function(){
			$("#investProm_jialist").toggle();
			var node=$('#investProm_jialist');
			if(node.is(':hidden')){　　//如果node是隐藏的则显示node元素，否则隐藏
			　　$("#investProm_jia").attr("src","#(assets)/images/mobile/personal_jiantou2.png");
			}else{
			　　$("#investProm_jia").attr("src","#(assets)/images/mobile/personal_jiantou3.png");
			}			
		});	 
		//选择优惠券
		$(".pass").click(function(){
			panduan = 1;
			var that = $(this);
			couponid = that.attr("pass");
			yhq_type2 = that.attr("pass2");
			$("#tz_amount").html(yhq_type2+"元"); 
			var aaa = that.attr("pass2") + "(" + that.attr("pass3") + ")";
			shouyi = (Number(rate) * Number(yhq_type2) * Number(datalimit) / 36000).toFixed(2);  
			$("#yq_amount").html(shouyi+" 元");
			$("#yq_amount2").html(shouyi+" 元");
			$("#investProm_jialist").hide();
			$("#yhq_num").html(aaa); 
			$("#yhq_num2").html(aaa); 
			
		});
		$("#investDetail_subimg").click(function(){
		    $("#investDetail_mengban").show();
			$("#cha").click(function(){
				$("#investDetail_mengban").hide();
			});
			function shouyi(){ 
				amounts = $("#amounts").val(); 
				if(amounts == ""){
					amounts = 0;
				}
				var shouyi = (amounts * rate * datalimit / 36000).toFixed(2);
				$("#shouyi").html(shouyi+" 元");
			}
			setInterval(shouyi,500); 
		});
	});
	//立即投资 
	$("#investProm_sumbit").unbind().click(function(){
		if(panduan==0){
			layer.msg("您还未选择优惠券！",{icon:2,time:1000}); 
		}else{
			$("#investProm_mengban").show();
			$("#investProm_passforse").click(function(){
				$("#investProm_mengban").hide();
			});
			$("#investProm_OK").click(function(){

				var url5="/trade?token=#(session.token??)&bid="+id+"&unit=" + yhq_type2 +"&tyj=" + couponid + "&ip=127.0.0.1";
				$.getJSON(url5, function(datainfo) {
					if(datainfo.code=='success'){
						layer.msg(datainfo.msg,{icon:1,time:1000},function(){
							window.location.href="#(path)/app/page/personal-project";
						}); 
					}else{
						layer.msg(datainfo.msg,{icon:2,time:1000},function(){
							$("#investProm_mengban").hide();
							$("#investProm_tishi").hide();
						}); 
					}
				});
			});
		}
	});
	//获取ID
	function GetRequest() {   
	   var url = location.search; //获取url中"?"符后的字串  
	   var theRequest = new Object();  
	   if (url.indexOf("?") != -1) {  
		  var str = url.substr(1);  
		  strs = str.split("&");  
		  for(var i = 0; i < strs.length; i ++) {  
			 theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);  
		  }  
	   }  
	   return theRequest;  
	}  
	
	


</script>

</body>
</html>
